<template>
  <div class="big">
    <div class="bigbox">
      <div class="smallbox">
        <div class="imgsrc"><img src="shouye.jpg" alt="" /></div>
        <div class="boxa">
          <div class="boxb">
            <h6>四级词汇</h6>
            <div class="tz"   @click="fu()">调整计划</div>
          </div>
          <div class="mr">每日20词, 剩余156天</div>
          <div class="jindu">
            <span class="jindua"></span><span class="jindub"></span>
          </div>
          <div class="xx">
            <span>已学单词</span>
            <span class="sz"> 22/3130</span>
          </div>
        </div>
      </div>
      <div class="dianji">点这里,查看本书单词<span class="sj"></span></div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    fu(){
      this.$router.push("/ggg")
    }
  }
};
</script>

<style scoped>
.big {
  height: 1.05rem;
  
  margin: 0 auto;
}
.bigbox {
  width: 3.47rem;
  /* width: 100%; */
  height: 100%;
  margin: 0 auto;
  
}
.smallbox {
  display: flex;
  width: 3.45rem;
  height: 1.2rem;
  /* background: pink; */
  box-sizing: border-box;
  margin: auto;
  border-bottom: 0.01rem solid #e9e9e9;
  /* flex-wrap: wrap; */
  margin-top: 0.18rem;
}
img {
  margin: 0.1rem;
  width: 0.5rem;
  height: 0.66rem;
  vertical-align: middle;
}
.boxa {
  /* box-sizing: border-box; */
  margin-left: 0rem;
  width: 100%;
}
.boxb {
  width: 2.53rem;
  display: flex;
  justify-content: space-between;
  /* margin: 0rem 0.10rem; */
  margin-top: 0.1rem;
  box-sizing: border-box;
}
.tz {
  width: 0.8rem;
  height: 0.25rem;
  border: 0.01rem solid #e6e6e6;
  background: #ffffff;
  text-align: center;
  border-radius: 0.04rem;
  /* text-align: center; */
  line-height: 0.25rem;
  font-size: 0.1rem;
  margin-top: 0.03rem;
  /* margin-right: .1rem; */
}
.mr {
  font-size: 0.1rem;
}
/* 进度条 */
.jindu {
  width: 2.53rem;
  display: flex;
  margin-top: 0.08rem;
}
.jindua {
  display: block;
  width: 0.1rem;
  height: 0.05rem;
  background: blue;
  border-radius: 0.02rem 0rem 0rem 0.02rem;
}
.jindub {
  display: block;
  width: 2.43rem;
  height: 0.05rem;
  background: gray;
  border-radius: 0rem 0.02rem 0.02rem 0rem;
}
.xx {
  width: 2.53rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.12rem;
  color: #d1d1d2;
  margin-top: 0.05rem;
}
.dianji {
  width: 1.4rem;
  height: 0.21rem;
  text-align: center;
  background: #2e2f4b;
  font-size: 0.1rem;
  text-align: center;
  color: #ffffff;
  line-height: 0.21rem;
  /* margin-left: 70px; */
  -webkit-transform: scale(0.833);
  position: relative;
  bottom: 0.45rem;
}
.sj {
  display: block;
  height: 0rem;
  width: 0rem;
  border-top: 0.08rem solid rgba(255, 0, 0, 0);
  border-bottom: 0.08rem solid #2e2f4b;
  border-left: 0.08rem solid rgba(255, 0, 0, 0);
  border-right: 0.08rem solid rgba(255, 0, 0, 0);
  position: absolute;
  bottom: 0.18rem;
  left: 0.2rem;
}
</style>